<template>
  <div class="body">
    <div class="body_main">
      <!-- <div class='body_main_header'>
        <el-input v-model='deptNameSearch' placeholder="请输入部门名称" clearable/>
        <el-select placeholder="请选择部门状态" v-model='deptStatusFilter' clearable>
          <el-option
            v-for='item in statusOptions'
            :key='item.value'
            :label='item.label'
            :value='item.value'
          />
        </el-select>
      </div> -->
      <div class="body_main_subject">
        <div class="left">
          <el-card>
            <div class="body_main_header">
              <el-input
                v-model="deptNameSearch"
                placeholder="请输入部门名称"
              >
                <div slot="suffix">
                  <Icon
                    title="搜索"
                    name="sousuo"
                    color="#A7ADB5"
                    font-size="20"
                  />
                </div>
              </el-input>
              <el-select
                placeholder="请选择部门状态"
                v-model="deptStatusFilter"
                clearable
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="tree_title">
              <span
                style="
                  display: inline-block;
                  width: 45%;
                  vertical-align: middle;
                "
                >部门名称</span
              >
              <span
                style="
                  display: inline-block;
                  width: 20%;
                  vertical-align: middle;
                "
                >部门状态</span
              >
              <span
                style="
                  width: 30%;
                  display: inline-block;
                  vertical-align: middle;
                  text-align: center;
                "
                >操作</span
              >
            </div>
            <el-tree
              ref="tree"
              :default-expand-all="true"
              :data="deptTree"
              :props="{ children: 'childTree' }"
              :filter-node-method="filterNode"
              :expand-on-click-node="false"
              node-key="pkid"
              highlight-current
              :current-node-key="deptDetails.pkid"
            >
              <template slot-scope="{ node, data }">
                <div
                  style="
                    width: 100%;
                    line-height: 36px;
                    font-size: 14px;
                  "
                  @click="onClick(data)"
                >
                  <span
                    style="
                      display: inline-block;
                      vertical-align: middle;
                      margin-right: 6px;
                    "
                  >
                    <icon
                      :title="'文件夹'"
                      :name="'bumenguanli'"
                      font-size="16"
                    />
                  </span>
                  <span
                    style="
                      display: inline-block;
                      width: 40%;
                      vertical-align: middle;
                    "
                    >{{ data.deptName }}</span
                  >
                  <span
                    style="
                      display: inline-block;
                      width: 20%;
                      vertical-align: middle;
                    "
                    :style="{
                      color: data.deptStatus
                        ? '#409EFF'
                        : 'red'
                    }"
                  >
                    <span v-if="data.pkid !== '01'">{{
                      data.deptStatus ? '启用' : '禁用'
                    }}</span>
                  </span>
                  <span
                    style="
                      width: 30%;
                      display: inline-block;
                      vertical-align: middle;
                    "
                  >
                    <i
                      v-if="
                        data.pkid !== '01' &&
                        $filterGlobalPermission(
                          'deptManagement:delete'
                        )
                      "
                      @click.stop="deleteDept(data.pkid)"
                      class="el-icon-delete"
                      style="
                        font-size: 16px;
                        float: right;
                        margin-right: 40%;
                        color: #ff5b5b;
                        line-height: 36px;
                      "
                    ></i>
                    <i
                      v-if="
                        data.pkid !== '01' &&
                        $filterGlobalPermission(
                          'deptManagement:edit'
                        )
                      "
                      @click.stop="update(data)"
                      class="el-icon-edit-outline"
                      style="
                        font-size: 16px;
                        float: right;
                        margin-right: 10px;
                        color: #00baff;
                        line-height: 36px;
                      "
                    ></i>
                    <i
                      v-if="
                        data.pkid !== '01' &&
                        $filterGlobalPermission(
                          'deptManagement:add'
                        )
                      "
                      @click.stop="addChild(data.pkid)"
                      class="el-icon-circle-plus-outline"
                      style="
                        font-size: 16px;
                        float: right;
                        margin-right: 10px;
                        color: #00baff;
                        line-height: 36px;
                      "
                    ></i>
                    <i
                      v-if="
                        data.pkid === '01' &&
                        $filterGlobalPermission(
                          'deptManagement:add'
                        )
                      "
                      @click.stop="addChild(data.pkid)"
                      class="el-icon-circle-plus-outline"
                      style="
                        font-size: 16px;
                        float: right;
                        margin-right: 40%;
                        color: #00baff;
                        line-height: 36px;
                      "
                    ></i>
                    <!-- <el-button type='text' style="float:right;margin-right:50%" @click.stop='addChild(data.pkid)'>添加子部门</el-button> -->
                  </span>
                </div>
              </template>
            </el-tree>
          </el-card>
        </div>
        <div class="right">
          <el-card>
            <h3>部门详情</h3>
            <div class="card_main">
              <div>部门名 {{ showDetail.deptName }}</div>
              <div
                v-if="
                  showDetail.pkid !== '01' &&
                  $filterGlobalPermission(
                    'deptManagement:status'
                  )
                "
              >
                部门状态
                <el-switch
                  v-model="showDetail.deptStatus"
                  style="margin-left: 20px"
                  @change="
                    handleEnableChange($event, showDetail)
                  "
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </div>
              <div>备注 {{ showDetail.remark }}</div>
            </div>
            <!-- <el-footer>
             <el-button :disabled='!deptDetails.pkid' class='update' @click='update'>编辑</el-button>
             <el-button :disabled='!deptDetails.pkid' class='delete' @click='deleteDept'>删除</el-button>
           </el-footer> -->
          </el-card>
        </div>
      </div>
      <el-dialog
        :visible.sync="dialogVisible"
        :title="headerTitle"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="600px"
      >
        <el-form
          :model="deptDetails"
          :rules="rules"
          v-if="dialogVisible"
          label-width="80px"
          ref="ruleForm"
        >
          <el-form-item label="部门名称" prop="deptName">
            <el-input v-model="deptDetails.deptName" />
          </el-form-item>
          <el-form-item label="简称">
            <el-input
              v-model="deptDetails.deptAbbreviation"
            />
          </el-form-item>
          <el-form-item label="部门状态" prop="deptStatus">
            <el-switch
              v-model="deptDetails.deptStatus"
              style="margin-left: 20px"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="deptDetails.remark" />
          </el-form-item>
          <el-form-item label="上级部门" prop="parentId">
            <el-cascader
              style="width: 100%"
              placeholder="选择部门"
              clearable
              v-model="deptDetails.parentId"
              :options="deptTrees"
              :props="{
                value: 'pkid',
                label: 'deptName',
                children: 'childTree',
                checkStrictly: true
              }"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button
            @click="dialogVisible = false"
            class="update"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="onSumbit('ruleForm')"
            >确定</el-button
          >
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getDeptTree,
  deptUpdate,
  deptAdd,
  deptDelete
} from '@/api/dept'
import Icon from '@/components/icon'
export default {
  name: 'index',
  components: {
    Icon
  },
  data() {
    return {
      add: true,
      deptNameSearch: '',
      deptStatusFilter: '',
      headerTitle: '编辑部门',
      search: {
        deptName: '',
        deptStatus: ''
      },
      dialogVisible: false,
      statusOptions: [
        {
          label: '启用',
          value: 1
        },
        {
          label: '禁用',
          value: 2
        }
      ],
      deptTree: [],
      deptTrees: [],
      showDetail: {},
      deptDetails: {
        parentId: '',
        deptName: '',
        deptStatus: '',
        remark: '',
        pkid: '',
        deptAbbreviation: ''
      },
      deptDetail: '',
      rules: {
        deptName: [
          {
            required: true,
            message: '请输入部门名称',
            trigger: 'blur'
          }
        ],
        deptStatus: [
          {
            required: true,
            message: '请选择部门状态',
            trigger: 'change'
          }
        ],
        parentId: [
          {
            required: true,
            message: '请选择上级部门',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {
    deptNameSearch(val) {
      this.$refs.tree.filter(val)
    },
    deptStatusFilter(val) {
      this.$refs.tree.filter(val)
      console.log(val)
    },
    dialogVisible(val) {
      if (!val) {
        if (this.deptDetails) {
          this.deptDetails.remark = ''
        }
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 输入框过滤
    filterNode(value, data) {
      if (!value) return true
      if (value.constructor === Number) {
        if (value === 2) value = 0
        return data.deptStatus === value
      } else {
        console.log(1243)
        return data.deptName.indexOf(value) !== -1
      }
    },
    // 添加子部门
    addChild(id) {
      this.headerTitle = '添加子部门'
      this.deptDetails = {}
      this.deptDetails.parentId = id
      this.deptDetails.deptStatus = 1
      this.deptTrees = JSON.parse(
        JSON.stringify(this.deptTree)
      )
      this.dialogVisible = true
      this.add = true
    },
    getList() {
      getDeptTree().then((res) => {
        if (res.success) {
          this.deptTree = this.deptScreen(res.data)
          this.onClick(this.deptTree[0])
          this.deptTrees = JSON.parse(
            JSON.stringify(this.deptTree)
          )
          // this.deptScreen(res.data)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 部门树筛选
    deptScreen(data) {
      data.map((item) => {
        if (item.childTree.length < 1) {
          item.childTree = undefined
        } else {
          this.deptScreen(item.childTree)
        }
      })
      return data
    },
    deptScreens(data) {
      data.map((item) => {
        console.log(item)
        if (item.pkid === this.deptDetails.pkid) {
          item.disabled = true
          item.childTree = undefined
        } else {
          if (item.childTree) {
            this.deptScreens(item.childTree)
          }
        }
      })
      return data
    },
    // 点击
    onClick(item) {
      this.deptDetails = JSON.parse(JSON.stringify(item))
      this.showDetail = JSON.parse(JSON.stringify(item))
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.deptDetails.pkid) // 一定要加这个选中了否则样式没有出来
      })
    },
    // 编辑
    update(data) {
      this.headerTitle = '编辑部门'
      this.add = false
      this.deptDetails = JSON.parse(JSON.stringify(data))
      this.deptTrees = this.deptScreens(this.deptTrees)
      this.dialogVisible = true
    },
    // 删除
    deleteDept(pkid) {
      this.$confirm(
        '此操作将永久删除该部门，是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          deptDelete(pkid).then((res) => {
            if (res.success) {
              this.$message.success(res.data)
              this.getList()
              this.deptDetails = ''
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    onSumbit(ruleForm) {
      this.$refs[ruleForm].validate((vaild) => {
        if (vaild) {
          if (Array.isArray(this.deptDetails.parentId)) {
            this.deptDetails.parentId =
              this.deptDetails.parentId[
                this.deptDetails.parentId.length - 1
              ]
          }
          if (this.add) {
            deptAdd({
              parentId: this.deptDetails.parentId,
              deptName: this.deptDetails.deptName,
              deptStatus: this.deptDetails.deptStatus,
              remark: this.deptDetails.remark,
              deptAbbreviation:
                this.deptDetails.deptAbbreviation
            }).then((res) => {
              if (res.success) {
                this.dialogVisible = false
                this.deptDetails = ''
                this.getList()
                this.$message.success(res.data)
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            deptUpdate(
              {
                parentId: this.deptDetails.parentId,
                deptName: this.deptDetails.deptName,
                deptStatus: this.deptDetails.deptStatus,
                remark: this.deptDetails.remark,
                deptAbbreviation:
                  this.deptDetails.deptAbbreviation
              },
              this.deptDetails.pkid
            ).then((res) => {
              if (res.success) {
                this.dialogVisible = false
                this.deptDetails = ''
                this.getList()
                this.$message.success(res.data)
              } else {
                this.$message.error(res.message)
              }
            })
          }
        }
      })
    },
    handleEnableChange(val, data) {
      console.log(val, data)
      deptUpdate(
        {
          parentId: data.parentId,
          deptName: data.deptName,
          deptStatus: data.deptStatus,
          deptAbbreviation: data.deptAbbreviation,
          remark: data.remark ?? ''
        },
        data.pkid
      ).then((res) => {
        if (res.success) {
          this.getList()
          this.$message.success(res.data)
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  width: calc(100% - 26px);
  height: calc(100% - 20px);
  margin: 10px;
  margin-left: 16px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  &_main {
    width: 100%;
    background: white;
    // padding: 15px 30px;
    &_header {
      display: flex;
      flex-wrap: nowrap;
      .el-input {
        width: 228px !important;
        float: right;
        .el-button {
          background: #f5f7fa !important;
          color: #a9acb1 !important;
        }
      }
    }
    &_header::v-deep {
      .el-input__inner {
        // background: #f6f9fc !important;
        color: #a7adb5 !important;
        height: 32px !important;
        width: 228px !important;
        .el-input__icon {
          width: 16px !important;
          height: 16px !important;
          font-size: 16px !important;
        }
      }
      .el-input__suffix {
        top: 1px !important;
        right: 8px !important;
      }
      .el-select {
        .el-input__inner {
          width: 170px !important;
          margin-left: 10px;
        }
        .el-input__suffix {
          top: 4px !important;
        }
        .is-focus {
          .el-input__suffix {
            top: -3px !important;
          }
        }
      }
      .el-cascader {
        top: -4px;
        .el-input__inner {
          width: 170px !important;
          margin-left: 10px;
        }
      }
    }

    &_subject {
      // margin-top: 20px;
      display: flex;
      width: 100%;
      height: 100%;
      .left {
        flex: 1;
        margin-right: 3px;
        height: 100%;
        border: 1px solid #f2f6fb;
        box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.05);
        .tree_title {
          width: 100%;
          height: 49px;
          background: #f2f6fb;
          border: 1px solid #f2f6fb;
          padding: 8px 5%;
          font-size: 14px;
          color: #6b767d;
          font-family: PingFang SC;
          margin-bottom: 8px;
          margin-top: 20px;
          font-weight: bold;
          span {
            line-height: 33px;
          }
        }
      }
      .right {
        flex: 1;
        height: 100%;
        .card_main {
          height: 300px;
          font-family: PingFang SC;
          div {
            line-height: 36px;
          }
        }
        h3 {
          line-height: 50px;
        }
      }
    }
  }
}
.body::v-deep {
  .el-tree > .el-tree-node > .el-tree-node__content {
    padding-left: 8px !important;
  }
  .el-tree-node.is-current > .el-tree-node__content {
    background-color: #f2f6fb;
    color: #497fa3;
  }
  .el-tree-node__content {
    height: 36px;
    font-size: 14px;
    font-family: PingFang SC;
    // margin-top: 6px;
  }
  .el-tree-node__content:hover {
    background-color: #f2f6fb;
    color: #497fa3;
  }
  .el-input {
    // width: 200px !important;
    // margin-right: 20px !important;
  }
  .el-input__inner {
    height: 34px !important;
    background-color: #f6f9fc !important;
  }
  .el-dialog {
    .el-dialog__header {
      background: #597182 !important;
      padding: 8px 0 14px 24px !important;
      height: 39px !important;
      .el-dialog__title {
        font-size: 16px !important;
        line-height: 22px;
        font-weight: 400 !important;
        color: white !important;
        //margin:19px 0 14px 24px !important;
      }
      .el-dialog__headerbtn {
        font-size: 16px;
        top: 10px !important;
        right: 17px !important;
        color: white !important;
        .el-dialog__close {
          color: white !important;
        }
      }
    }
    .el-dialog__body {
      padding: 17px 32px 18px 26px !important;
      .el-form-item {
        margin-bottom: 19px !important;
      }
    }
    .el-input__inner {
      height: 34px !important;
      background-color: #f6f9fc !important;
    }
    .el-button--default {
      border-color: #497fa3 !important;
      span {
        color: #497fa3 !important;
      }
    }
    .el-button--primary {
      background: #497fa3 !important;
      border-color: white !important;
    }
  }
  .el-card {
    height: 100%;
    overflow: auto;
    border: 0px solid #000;
  }
  .el-button.update {
    // background: #02a7f0;
    // color: white !important;
  }
  .el-button.delete {
    //background: #FF5B5B;
    //color: white !important;
  }
}
</style>
